import React, { useState, CSSProperties } from 'react';
import { BarsOutlined } from '@ant-design/icons';
import classnames from 'classnames';
import { Transition } from 'react-transition-group';
import logo from '@/assets/images/logo.png'
import './index.less'
const duration = 1000

const defaultStyle = {
    transition: `opacity ${duration} ms ease-in-out`,
    opacity: 0
}

interface TransitionStyles {
    entering: CSSProperties
    entered: CSSProperties
    exiting: CSSProperties
    exited: CSSProperties
}

const transitionStyles: TransitionStyles = {
    entering: { opacity: 1 },
    entered: { opacity: 1 },
    exiting: { opacity: 0 },
    exited: { opacity: 0 },
}

interface Props {
    currentCategory: string
    setCurrentCategory: (currentCategory: string) => any
}

function HomeHeader(props: Props) {
    let [isMenuVisible, setIsMenuVisible] = useState(false)
    const setCurrentCategory = (event: React.MouseEvent<HTMLUListElement>) => {
        let target: HTMLUListElement = event.target as HTMLUListElement
        let category = target.dataset.category
        props.setCurrentCategory(category)
        setIsMenuVisible(false)
    }

    return (
        <header className="home-header">
            <div className="logo-header">
                <img src={logo}></img>
                <BarsOutlined onClick={() => setIsMenuVisible(!isMenuVisible)}></BarsOutlined>
            </div>
            <Transition in={isMenuVisible} timeout={duration}>
                {
                    (state: keyof TransitionStyles) => (
                        <ul className="category" onClick={setCurrentCategory} style={{ ...defaultStyle, ...transitionStyles[state] }}>
                            <li data-category="all" className={classnames({ active: props.currentCategory === 'all' })}>全部课程</li>
                            <li data-category="react" className={classnames({ active: props.currentCategory === 'react' })}>React课程</li>
                            <li data-category="vue" className={classnames({ active: props.currentCategory === 'vue' })}>Vue课程</li>
                        </ul>
                    )
                }
            </Transition>
        </header>
    )
}

export default HomeHeader